<template>
<div>
      <FouDialog
      :title="'添加/修改'"
      :width="'65%'"
      v-model:dialogValue="dialogValue"
    >
    <template #content>
            <el-form :model="form" label-width="170px" :rules="rules" ref="ruleFormRef">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="產品名稱" prop="name"><el-input v-model="form.name" /></el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="產品分類" prop="products_type_id">
                <el-select  v-model="form.products_type_id"  size="default" >
                    <el-option v-for="item in producttypeList" :key="item.value" :label="item.name" :value="item.id" />
                </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="產品品牌" prop="brand_id">
               <el-select  v-model="form.brand_id"  size="default" >
                    <el-option v-for="item in brandList" :key="item.value" :label="item.name" :value="item.id" />
                </el-select>
          </el-form-item>
        </el-col>

         <el-col :span="12">
          <el-form-item label="單位" prop="unit_id">
                <el-select  v-model="form.unit_id"  size="default" >
                    <el-option v-for="item in unitList" :key="item.value" :label="item.name" :value="item.id" />
                </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="條形碼" prop="barcode" type="password"><el-input v-model="form.barcode" /></el-form-item>
        </el-col>


        <el-col :span="12">
          <el-form-item label="型號" prop="type"><el-input v-model="form.type" /></el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="價格" prop="price"><el-input v-model="form.price" type="number"/></el-form-item>
        </el-col>


        <el-col :span="12">
          <el-form-item label="成本" prop="cost"><el-input v-model="form.cost" type="number" /></el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="備註" prop="remark"><el-input v-model="form.remark" type="textarea" /></el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="狀態" prop="status">
                <el-select  v-model="form.status"  size="default" >
                    <el-option v-for="item in sexOptions" :key="item.value" :label="item.name" :value="item.id" />
                </el-select>
          </el-form-item>
        </el-col>
  
        <el-col :span="12">
          <el-form-item label="供應商" prop="supplier_id">
            <el-select  v-model="form.supplier_id"  size="default" >
              <el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="維修期" prop="maintain"><el-input v-model="form.maintain" /></el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="介绍" prop="introduce">
            <el-input v-model="form.introduce" type="textarea" />
          </el-form-item>
        </el-col>
        <el-col :span="12"></el-col>
        <el-col :span="12">
          <el-form-item label="計算庫存狀態" prop="numstatus"><el-switch v-model="form.numstatus" @change="inventory" /></el-form-item>
        </el-col>
        <el-col :span="12" >
          <el-form-item v-show="form.numstatus" label="安全量" prop="safety"><el-input v-model="form.safety" type="number" /></el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="限時優惠狀態" prop="discountstatus">
              <el-switch v-model="form.discountstatus" @change="discountSwitch" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="限時優惠時間" prop="discounttime" v-show="form.discountstatus">
                  <el-date-picker
                    v-model="form.discounttime"
                    type="datetimerange"
                    range-separator="至"
                    format="YYYY/MM/DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    start-placeholder="限時優惠開始時間"
                    end-placeholder="限時優惠結束時間"
                  />
          </el-form-item>
        </el-col>
        <el-col :span="12"></el-col>
        <el-col :span="12">
          <el-form-item label="折扣價"  v-show="form.discountstatus" prop="discountprice"><el-input v-model="form.discountprice" type="number" /></el-form-item>
        </el-col>
      </el-row>
    </el-form>
    </template>
      <template #footer>
                       <div class="flex justify-end mt-10 w-[100%]" >
            <el-button @click="emit('addCancal')">取消</el-button>
            <el-button type="primary" @click="confirm(ruleFormRef,buttonType,dialogValue = false)" color="#081F42"
              >確定</el-button
            >
           </div>
      </template>
      </FouDialog>
</div>
</template>

<script setup>
import { ref  ,reactive, watch } from 'vue' 
import {message,messageBox,loading,closeLoading} from '@/common/function.js'
import {addProduct,updateProduct } from "@/http/index.js";

const dialogValue = ref(false)
const form = reactive({
    name: "",
    products_type_id: "",//產品分類
    brand_id:'',         //產品品牌
    unit_id:'',          //單位
    barcode: "",
    type: "",
    price: "",
    cost:'',
    remark:'',
    status: "",
    safety:1,
    supplier_id:'',       //供應商
    maintain:'',
    introduce:'',
    numstatus:true,
    discountstatus:false,
    // discounttime:'',
    // discountprice:'',
});

const  rules = reactive({
        name:{required:true,message:'请输入產品名稱',trigger: ['blur', 'change']},
        products_type_id:{required:true,message:'请選擇產品分類',trigger: ['blur', 'change']},
        brand_id:{required:true, message:'请選擇品牌',trigger: ['blur', 'change']},
        unit_id:{required:true,message:'请選擇單位',trigger: ['blur', 'change']},
        barcode:{required:true,message:'请輸入產品條形碼',trigger: ['blur', 'change']},
        price:{required:true,message:'请輸入產品價格',trigger: ['blur', 'change']},
        cost:{required:true,message:'请輸入產品成本',trigger: ['blur', 'change']},
        status:{required:true,message:'请選擇產品狀態',trigger: ['blur', 'change']},
        safety:{required:true, message:'请輸入產品安全量',trigger: ['blur', 'change']},
        supplier_id:{ required:true,message:'请產品供應商', trigger: ['blur', 'change']},
        introduce:{required:true,message:'请输入產品介紹',trigger: ['blur', 'change']},
    })

const sexOptions = [
  {
    id: 1,
    name: '發售中',
  },{
    id: -1,
    name: '停售',
  }
]
const ruleFormRef = ref('')
const buttonType = ref('')
const confirm = (formEl,type)=>{
  if (!formEl) return;
      formEl.validate(async (e)=>{
        if (e) {
            let params = JSON.parse(JSON.stringify(form));
            console.log(params);
            if (params.discounttime ) {
            params.starttime = params.discounttime[0]
            params.endtime = params.discounttime[1]
            }
            delete params.discounttime
            if (params.numstatus) {
              params.numstatus = 1
            }else{params.numstatus = -1}
            if (params.discountstatus) {
              params.discountstatus = 1
            }else{ params.discountstatus = -1}
            if (type == 'add') {
              delete params.id
            await addTableList(params)
            }
            if (type == 'copy') {
              delete params.id
            await addTableList(params)
            }
            if (type == 'edit') {
             await updateTableList(params)
            }
        }
    })
}
// 修改產品
const updateTableList = async (e) => {
  const data = await updateProduct(e);
  if (data.code == 200) {
     emit('addConfirm')
    message('修改產品成功')
  }else{ message('修改產品失敗','warning')}
};
// 添加產品
const addTableList = async (e) => {
  const data = await addProduct(e);
  console.log(data);
  if (data.code == 200) {
    message('添加產品成功')
    emit('addConfirm')
  }else{
    message('添加產品失敗','warning')
  }
};
const props = defineProps({
    echo:Object,
    producttypeList:Object,//產品分類
    brandList:Object,//產品品牌
    supplierList:Object, //供應商
    unitList:Object,//單位
})
Object.assign(form,props.echo)
watch(()=>props.echo,(newval)=>{
Object.assign(form,newval)
})
const emit = defineEmits(['addConfirm','addCancal'])

const discountSwitch = (e)=>{
  if (e) {
        rules.discounttime =  {required:true, message:'请選擇限時優惠開始-結束時間',trigger: ['blur', 'change']}     
        rules.discountprice =  {required:true, message:'请輸入限時優惠價格',trigger: ['blur', 'change']}     
  }else{
        delete form.discounttime
        delete form.discountprice
        delete rules.discounttime
        delete rules.discountprice
  }
}
const inventory = (e)=>{
  if (e) {
    rules.safety= {required:true, message:'请輸入產品安全量',trigger: ['blur', 'change']}
    form.safety = 1
  }else{
    delete rules.safety,
    delete form.safety
  }
}

defineExpose({
    dialogValue,buttonType
})
</script>

<style lang='less'  scoped>

</style>